<template>
  <div class="searchpage">
    <div class="content">
      <div class="searchbox">
        <input
          type="text"
          placeholder="请输入作品名、创作人"
          @keyup.enter="search(value)"
          v-model="value"
        />
        <span class="iconfont icon-sousuo_o"></span>
        <router-link tag="div" to="/search" class="cancel">取消</router-link>
      </div>

      <div class="suggest" v-if="!value || !searchList.length">
        <div class="history">
          <div class="top">
            <p>历史搜索</p>
            <van-icon name="delete-o" size="18" color="#999" @click="deletes" />
          </div>
          <div class="historylist">
            <div
              class="item"
              v-for="history in seacrchhistory"
              @click="search(history)"
            >
              {{ history }}
            </div>
          </div>
        </div>

        <div class="hotcontent">
          <p>热门内容</p>
          <div class="list">
            <div class="listitem" v-for="rank in ranking">
              <span :class="{ num: rank.rank > 3 }">{{ rank.rank }}</span>
              <p>{{ rank.content }}</p>
            </div>
          </div>
        </div>

        <div class="hotsearch">
          <p>热门搜索</p>
          <div class="trem">
            <div
              v-for="keyword in keywords"
              :key="keyword.id"
              @click="search(keyword.name)"
            >
              {{ keyword.name }}
            </div>
          </div>
        </div>
      </div>

      <div class="searchlist" v-if="searchList && value">
        <div class="all">
          共 <span>{{ searchList.length }}</span
          >部作品
        </div>
        <div class="searchitem">
          <div
            class="item"
            v-for="list in searchList"
            :key="list.id"
            @click="toDetail(list.id)"
          >
            <div class="vedio">
              <!-- <img :src="list.cover" alt="" /> -->

              <van-image
                width="170rem"
                height="90rem"
                :src="list.cover"
                radius="10rem"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </div>
            <div class="text">
              <div class="title">
                <p>
                  {{ list.title }}
                </p>
              </div>
              <div class="numbers">
                <span>播放量</span>
                <span>{{ NumberFilter(list.count.count_view) }}</span>
                <span>喜欢</span>
                <span>{{ NumberFilter(list.count.count_like) }}</span>
              </div>
              <div class="author">
                <div class="avatar">
                  <img :src="list.author.userinfo.avatar" alt="" />
                </div>
                <div class="name">
                  <p>{{ list.author.userinfo.username }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <p class="more">没有更多了</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import { getRecommendkws, getSearchList } from "../api/index";
import { computed } from "@vue/runtime-core";

const ranking = ref([
  {
    rank: 1,
    content: "国际气象节微纪录片:追风的人",
  },
  {
    rank: 2,
    content: "国外超酷定格创意网络广告",
  },
  {
    rank: 3,
    content: "中华顶流张颂文高光作品混剪",
  },
  {
    rank: 4,
    content: "影视干活教程系统学",
  },
  {
    rank: 5,
    content: "深圳2023宣传片《开新造梦》",
  },
  {
    rank: 6,
    content: "绝命毒师2023超级碗广告",
  },
  {
    rank: 7,
    content: "百万剪辑师狂飙混剪",
  },
  {
    rank: 8,
    content: "AI神器狂飙 影视人又要卷了",
  },
  {
    rank: 9,
    content: "绝美视觉!三分钟看绽放中国",
  },
  {
    rank: 10,
    content: "情人节",
  },
]);
const router = useRouter();
const keywords = ref([]);
getRecommendkws().then((res) => {
  keywords.value = res.data.data.list;
  // console.log(keywords.value);
});

//搜索结果
const value = ref("");
const searchList = ref([]);
const isShow = ref(false);

function search(kw) {
  console.log(kw);
  value.value = kw;
  isShow.value = true;
  getSearchList(kw).then((res) => {
    searchList.value = res.data.data.list;
  });

  seacrchhistory.value.unshift(value.value);
  seacrchhistory.value = new Set(seacrchhistory.value);
  seacrchhistory.value = [...seacrchhistory.value];
}

//删除历史记录
function deletes() {
  localStorage.removeItem("seacrchhistory");
  seacrchhistory.value = [];
}

//跳转到详情页面
function toDetail(id) {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
}

//过滤器
const NumberFilter = computed(() => {
  return (value) => {
    if (value < 10000) {
      return value;
    } else {
      let w = value > 10000 ? value / 10000 : value;
      let y = w > 10000 ? (w / 10000).toFixed(1) + "亿" : w.toFixed(1) + "万";
      return y;
    }
  };
});

const seacrchhistory = ref(
  JSON.parse(localStorage.getItem("seacrchhistory")) || []
);

watch(value, (newValue) => {
  if (newValue == "") {
    console.log(newValue);
    searchList.value = [];
  }
});

//添加历史记录
watch(
  () => seacrchhistory.value,
  (newValue) => {
    localStorage.setItem("seacrchhistory", JSON.stringify([...newValue]));
  }
);
</script>

<style lang="scss" scoped>
.searchpage {
  .content {
    padding-bottom: 50rem;
    .searchbox {
      padding: 15rem 20rem;
      // position: relative;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2rem solid #f5f5f5;
      background-color: #fff;
      z-index: 10;
      input {
        width: 85%;
        height: 30rem;
        line-height: 30rem;
        padding-left: 50rem;
        font-size: 14rem;
        border: none;
        background-color: #f0f0f0;
        border-radius: 5rem;
      }
      input::-webkit-input-placeholder {
        /*WebKit browsers*/
        color: #bdbdbd;
      }
      input::-moz-input-placeholder {
        /*Mozilla Firefox*/
        color: #bdbdbd;
      }
      span {
        font-size: 25rem;
        color: #bdbdbd;
        position: absolute;
        top: 17rem;
        left: 35rem;
      }
      .cancel {
        font-size: 16rem;
        color: #000;
      }
    }
    .history {
      padding: 0 20rem;

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
          font-size: 14rem;
          color: #999;
          margin: 25rem 0 15rem 0;
        }
      }
      .historylist {
        display: flex;
        flex-wrap: wrap;
        .item {
          padding: 5rem 15rem;
          font-size: 12rem;
          color: #000;
          background-color: #f0f0f0;
          border-radius: 3rem;
          margin-right: 10rem;
          margin-bottom: 10rem;
        }
      }
    }
    .hotcontent {
      padding: 0 20rem;
      p {
        font-size: 14rem;
        color: #999;
        margin: 25rem 0;
      }
      .list {
        .listitem {
          display: flex;
          align-items: center;
          margin-bottom: 25rem;
          span {
            font-size: 14rem;
            color: #000;
            &.num {
              color: #999;
            }
          }
          p {
            font-size: 14rem;
            color: #000;
            margin: 0px 10rem;
          }
        }
      }
    }
    .hotsearch {
      padding: 0 20rem;

      p {
        font-size: 14rem;
        color: #999;
        margin: 25rem 0 15rem 0;
      }
      .trem {
        display: flex;
        flex-wrap: wrap;
        div {
          padding: 5rem 15rem;
          font-size: 12rem;
          color: #000;
          background-color: #f0f0f0;
          border-radius: 3rem;
          margin-right: 10rem;
          margin-bottom: 10rem;
        }
      }
    }
    .searchlist {
      padding: 20rem;
      .all {
        font-size: 14rem;
        color: #999;
        span {
          color: #da5c52;
          margin: 0 2rem;
          font-weight: bold;
        }
      }
      .searchitem {
        padding: 15rem;
        .item {
          display: flex;
          border-bottom: 2rem solid #f5f5f5;
          padding: 15rem 0;
          // align-items: center;
          .vedio {
            margin-right: 10rem;
            img {
              width: 170rem;
              height: 90rem;
              border-radius: 10rem;
            }
          }
          .text {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            .title {
              p {
                font-size: 14rem;
                color: #000;
                font-weight: bold;
                display: -webkit-box;
                text-overflow: ellipsis;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                // height: 40rem;
              }
            }
            .numbers {
              span {
                font-size: 12rem;
                color: #999;
                margin-right: 5rem;
              }
            }
            .author {
              display: flex;
              align-items: center;
              .avatar {
                img {
                  width: 15rem;
                  height: 15rem;
                  border-radius: 50%;
                  margin-right: 15rem;
                }
              }
              .name {
                p {
                  width: 120rem;
                  font-size: 14rem;
                  color: #666;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
            }
          }
        }
      }
      .more {
        font-size: 14rem;
        color: #000;
        text-align: center;
      }
    }
    .suggest {
      margin-top: 65rem;
    }
  }
}
</style>